<template>
	<view>
		<view class="login-bg flex">
			<image :src="bgImageUrl" mode="widthFix"></image>
		</view>
		<view class="login-container">
			<view class="login-item">
				<image src="@/static/images/mobile.png" mode="widthFix"></image>
				<input placeholder-class="placeholder" class="Input" type="number" placeholder="请输入手机号码" v-model="mobile" />
			</view>
			<view class="login-item">
				<image src="@/static/images/pwd.png" mode="widthFix"></image>
				<input placeholder-class="placeholder" class="Input" type="password" placeholder="请输入密码" v-model="password" />
			</view>
		</view>
		<view class="btn" @click="login">
			立即登录
		</view>
		<view class="jump">
			<view class="register" @click="toregister">
				<text class="not-number">没有账号？</text>
				<text class="toregister">去注册</text>
			</view>
			<view class="toforget" @click="forget">忘记密码?</view>
		</view>
		<view class="footer flex">
			<image style="width: 28rpx;height: 28rpx;" src="@/static/images/no.png" v-if="!agree" mode="aspectFill" @click="clickAgree"></image>
			<image style="width: 28rpx;height: 28rpx;" src="@/static/images/yes.png" v-if="agree" mode="aspectFill" @click="clickAgree"></image>
			<view>
				<text style="font-size:24rpx;color: #666;padding-left: 12rpx;">我已阅读并同意</text>
				<text style="font-size:24rpx;color: #FE3052;" @click="toagree('用户协议')">《用户协议》</text>
				<text style="font-size:24rpx;color: #FE3052;" @click="toagree('隐私协议')">《隐私协议》</text>
			</view>
		</view>
		<!-- 提示 -->
		<uv-popup ref="tipRef" mode="center" :round="15" :safeAreaInsetBottom="false">
			<view class="register-popup" style="width: 630rpx;">
				<view class="register-title">
					<view class="title">
						提示
					</view>
				</view>
				<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
					<view style="font-size:28rpx;">
						<text style="color: #666;">请先同意</text>
						<text style="color: #FE3052;" @click="toagree('用户协议')">《用户协议》</text>
						<text style="color: #666;">和</text>
						<text style="color: #FE3052;" @click="toagree('隐私协议')">《隐私协议》</text>
					</view>
				</view>
				<view class="footer-btn">
					<view class="cancel" @click="tipRef.close()">
						取消
					</view>
					<view class="confirm" @click="agreeCheck">
						同意
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		inject
	} from 'vue';
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	const userstore = useUserStore()
	import {
		useActiveStore
	} from '@/store/modules/active.js'
	const activeStore = useActiveStore()
	const tipRef = ref()
	const agree = ref(false)
	const password = ref('')
	const mobile = ref('')
	const baseurl = ref('')
	const bgImageUrl = ref('')
	const chat2 = inject('$chat')
	onLoad(() => {
		getConfigData()
	})
	onShow(() => {
		if (uni.hideHomeButton) {
			uni.hideHomeButton()
		}
	})
	const toregister = () => {
		uni.navigateTo({
			url: '/pages/login/register/index'
		})
	}
	const toagree = (text) => {
		uni.navigateTo({
			url: '/pages/login/agreement/index?title=' + text
		})
	}
	const clickAgree = () => {
		agree.value = !agree.value
	}
	// 获取文件域名
	const getConfigData = async () => {
		let res = await userstore.getConFig({
			type: 'getBaseUrl'
		})
		if (res.code == 200) {
			baseurl.value = res.data.content
			uni.setStorageSync('baseUrl', res.data.content)
			getBannerList()
		}
	}
	// 获取banner图
	const getBannerList = async () => {
		let res = await activeStore.getBannerList({
			position: 1
		})
		if (res.code == 200) {
			bgImageUrl.value = baseurl.value + res.data[0].image
		}
	}
	// 弹窗同意勾选
	const agreeCheck = throttle(() => {
		agree.value = true
		tipRef.value.close()
		login()
	}, 500)
	// 登录
	const login = throttle(async () => {
		let params = {
			mobile: mobile.value,
			password: password.value
		}
		if (agree.value) {
			let res = await userstore.login(params)
			if (res.code == 200) {
				uni.$uv.toast('登录成功')
				userstore.token = res.data.token
				uni.setStorageSync('token', res.data.token)
				uni.setStorageSync('expireTime', res.data.expire_time) //token过期时间
				setTimeout(() => {
					chat2.initialize().then(res => {
						chat2.chatTUILogin(res).then(async res => {
							let result = await userstore.getUserInfo()
							// 修改个人标配资料
							let promise2 = chat2.chat.updateMyProfile({
								nick: result.data.username,
								avatar: result.data.avatar == '' ? '/static/images/avatar.png' : baseurl.value + result.data.avatar,
							});
							promise2.then(function(imResponse) {
								console.log(imResponse.data); // 更新资料成功
							}).catch(function(imError) {
								console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
							});
							uni.switchTab({
								url: '/pages/index/index'
							})
						})
					})
				}, 500)
			}
		} else {
			tipRef.value.open()
		}
	}, 500)
	// 忘记密码
	const forget = throttle(() => {
		uni.navigateTo({
			url: '/pages/login/forgetpwd/index'
		})
	}, 200)
</script>

<style lang="scss" scoped>
	.login-bg {
		padding-top: 30rpx;

		image {
			width: 670rpx;
		}
	}

	.placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}

	.login-container {
		width: 100%;

		.login-item {
			margin: 40rpx auto;
			display: flex;
			align-items: center;
			width: 630rpx;
			padding: 36rpx 40rpx;
			background-color: #F6F6F6;
			border-radius: 56rpx 56rpx 56rpx 56rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.Input {
				padding-left: 30rpx;
			}
		}
	}

	.btn {
		width: 630rpx;
		margin: auto;
	}

	.jump {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 40rpx 0 60rpx;

		.register {
			font-weight: 400;
			font-size: 28rpx;

			.not-number {
				color: #999999;
			}

			.toregister {
				color: #FE3052;
			}
		}

		.toforget {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 30rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.register-popup {
		padding: 40rpx 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;

			.recharge {

				color: #FE3052;
			}
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}
	}
</style>